<template>
  <div class="cart">
    <div
      class="cart-item"
      v-for="item in cart"
      :key="item.id"
    >
      <div class="cart-l">
        <van-checkbox v-model="item.completed" />
      </div>
      <van-card
        class="cart-r"
        :price="item.price"
        :title="item.title"
        :thumb="item.src"
      >
        <template #num>
          <van-stepper v-model="item.count" />
        </template>
      </van-card>
    </div>
    <van-submit-bar :price="allprices*100" button-text="提交订单">
  <van-checkbox v-model="allCheck" @click="setAllChbox">全选</van-checkbox>
  </van-submit-bar>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState({
      cart: state => state.car.cart
    }),
    ...mapGetters({
      allprices: "car/addprices",
      allCheck:"car/allCheck"
    })
  },
  data () {
    return {
    }
  },
  methods:{
    setAllChbox () {
      this.$store.commit('car/setAllChbox')
    }
  }
}
</script>
<style lang="scss" scoped>
.cart {
  padding: 10px;
  box-sizing: border-box;
  .cart-item {
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .cart-l {
      flex: 0.3;
      display: flex;
      justify-content: end;
    }
    .cart-r {
      flex: 2;
      margin-top: 0;
      background-color: #fff;
    }
  }
}
</style>
